import React, { Component } from "react";
import { connect } from "dva";
import { Input, Button, Icon, Select } from "antd";
import styles from "./AddApi.less";

const { Option } = Select;

@connect(stores => ({
  apidata: stores.adddataSource
}))
class AddApi extends Component {
  state = {
    url: "",
    method: "",
    host: "",
    appKey: "",
    appSecret: "",
    AllControl: false,
    through: false
  };

  componentDidMount() {
    setTimeout(() => {
      const { dataDetail = {}, operate = "add" } = this.props;
      if (operate === "mod" && dataDetail && dataDetail.dsType === 1) {
        this.setState(
          {
            url: dataDetail.apiUrl,
            method: dataDetail.apiMethod,
            appKey: dataDetail.apiAppKey,
            appSecret: dataDetail.apiAppSecret,
            host: dataDetail.apiHost
          },
          () => {
            this.getUnsave();
          }
        );
      }
    }, 700);
  }

  urlSet = e => {
    this.setState(
      {
        url: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  hostSet = e => {
    this.setState(
      {
        host: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  appSSet = e => {
    this.setState(
      {
        appSecret: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  appKSet = e => {
    this.setState(
      {
        appKey: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  methodSet = e => {
    this.setState(
      {
        method: e,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  getUnsave = () => {
    const { getValue } = this.props;
    const tmp = [];
    const temp = {};
    temp.url = this.state.url;
    temp.method = this.state.method;
    temp.host = this.state.host;
    temp.appKey = this.state.appKey;
    temp.appSecret = this.state.appSecret;
    tmp.push(temp);
    getValue(tmp, this.state.AllControl, this.state.through);
  };

  test = () => {
    const { getValue, dispatch } = this.props;
    if (
      this.state.method !== "" &&
      this.state.url !== "" &&
      this.state.host !== "" &&
      this.state.appKey !== "" &&
      this.state.appSecret !== ""
    ) {
      dispatch({
        type: "adddataSource/testConnect",
        payload: {
          dsType: 1,
          apiUrl: this.state.url,
          apiHost: this.state.host,
          apiAppKey: this.state.appKey,
          apiAppSecret: this.state.appSecret,
          apiMethod: this.state.method
        }
      }).then(() => {
        const { apidata } = this.props;
        const { testErr = false } = apidata;
        if (testErr) {
          this.setState(
            {
              AllControl: true,
              through: true
            },
            () => {
              const tmp = [];
              const temp = {};
              temp.url = this.state.url;
              temp.host = this.state.host;
              temp.appKey = this.state.appKey;
              temp.appSecret = this.state.appSecret;
              temp.method = this.state.method;
              tmp.push(temp);
              getValue(tmp, this.state.AllControl, this.state.through);
            }
          );
        } else {
          this.setState(
            {
              AllControl: true,
              through: false
            },
            () => {
              const tmp = [];
              const temp = {};
              temp.url = this.state.url;
              temp.method = this.state.method;
              temp.host = this.state.host;
              temp.appKey = this.state.appKey;
              temp.appSecret = this.state.appSecret;
              tmp.push(temp);
              getValue(tmp, this.state.AllControl, this.state.through);
            }
          );
        }
      });
    }
  };

  renderSuffix = () =>
    this.state.through ? (
      <Icon type="check-circle" style={{ color: "#52C41A" }} />
    ) : (
      <Icon type="close-circle" style={{ color: "#e23c39" }} />
    );

  render() {
    const { url, method, host, appKey, appSecret } = this.state;
    const { param, editable } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.title}>数据配置</div>
        <div className={styles.info}>
          <div className={styles.choice1}>
            <span className={styles.star}>*</span>URL：
            <Input
              className={styles.notEmpty}
              placeholder="请输入URL"
              onChange={this.urlSet}
              suffix={this.state.AllControl ? this.renderSuffix() : null}
              value={url}
              maxLength={100}
              disabled={!editable}
            />
          </div>
          <div className={styles.choice1}>
            <span className={styles.star}>*</span>host：
            <Input
              className={styles.notEmpty}
              placeholder="请输入host"
              onChange={this.hostSet}
              suffix={this.state.AllControl ? this.renderSuffix() : null}
              value={host}
              disabled={!editable}
            />
          </div>
          <div className={styles.choicekey}>
            <span className={styles.star}>*</span>app_key：
            <Input
              className={styles.notEmpty}
              placeholder="请输入app_key"
              onChange={this.appKSet}
              suffix={this.state.AllControl ? this.renderSuffix() : null}
              value={appKey}
              disabled={!editable}
            />
          </div>
          <div className={styles.choicese}>
            <span className={styles.star}>*</span>app_secret：
            <Input
              className={styles.notEmpty}
              placeholder="请输入app_secret"
              onChange={this.appSSet}
              suffix={this.state.AllControl ? this.renderSuffix() : null}
              value={appSecret}
              disabled={!editable}
            />
          </div>
          <div
            className={
              this.state.AllControl ? styles.choiceIcon : styles.choice2
            }
          >
            <span className={styles.star}>*</span>method：
            <Select
              className={styles.notEmpty}
              placeholder="请输入method"
              onChange={this.methodSet}
              showArrow={!this.state.AllControl}
              value={method}
              disabled={!editable}
              // suffixIcon={
              //   this.state.AllControl ? this.renderSuffix("method") : null
              // }
            >
              <Option value="1">POST</Option>
              <Option value="2">GET</Option>
            </Select>
            {this.state.AllControl ? (
              <div style={{ marginLeft: -28, zIndex: 100 }}>
                {this.renderSuffix()}
              </div>
            ) : null}
          </div>
          <div
            style={{
              width: 466,
              marginLeft: 90,
              marginTop: 8,
              marginBottom: 24
            }}
          >
            <Button
              type="primary"
              onClick={this.test}
              style={{
                backgroundColor: this.state.through ? "#52C41A" : ""
              }}
              disabled={
                param[0] === "" ||
                param[1] === "" ||
                url === "" ||
                method === "" ||
                host === "" ||
                appKey === "" ||
                appSecret === ""
              }
            >
              {this.state.through ? "测试通过" : "连通测试"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default AddApi;
